<template>
  <div class="editor-page">
    <div class="container page">
        <div class="row">

            <div class="col-md-10 offset-md-1 col-xs-12">
                <ul class="error-messages">
                    <template v-for="(messages, field) in errors">
                        <li v-for="(message, index) in messages" :key="index">
                            {{field}} {{message}}</li>
                    </template>
                </ul>

                <form @submit.prevent="onSubmit">
                        <fieldset class="form-group">
                            <input v-model="article.title" type="text" class="form-control form-control-lg" placeholder="Article Title">
                        </fieldset>
                        <fieldset class="form-group">
                            <input v-model="article.description" type="text" class="form-control" placeholder="What's this article about?">
                        </fieldset>
                        <fieldset class="form-group">
                            <textarea v-model="article.body" class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
                        </fieldset>
                        <fieldset class="form-group">
                            <input v-model="article.tagList" type="text" class="form-control" placeholder="Enter tags"><div class="tag-list"></div>
                        </fieldset>
                        <button class="btn btn-lg pull-xs-right btn-primary" type="submit">
                            Publish Article
                        </button>
                </form>
            </div>

        </div>
    </div>
  </div>
</template>

<script>
import {addArticle} from '@/api/article'
export default {
    middleware:'authenticated',
    name:'editorIndex',
    data(){
        return {
            article:{
                    "title": "How to train your dragon1",
                    "description": "Ever wonder how?",
                    "body": "You have to believe",
                    "tagList": ["reactjs", "angularjs", "dragons"]
            },
            errors:{}
        }
    },
    methods:{
        async onSubmit(){
            try{
                const {data} = await addArticle({
                    article:this.article
                })
                // console.dir(data)
                // console.dir(data.article)
                const slug = data.article.slug
                this.$router.push({name:'article',params:{slug:slug}})
            }catch(err){
                this.errors = err.response.data.errors
            }

        }
    }
}
</script>

<style>

</style>